<!-- CREATE 2022-08-11 -->
<!-- AUTHOR 伊玖OneNine -->

<script setup lang="ts">
import { CogOutline, WarningOutline } from '@vicons/ionicons5'
import type { FaceInfoType } from '~/api/face/faceApi'

const props = defineProps<propsType>()
const message = useMessage()
const loadingBar = useLoadingBar()

const modalLoading = ref(false)

interface propsType {
  tableData: FaceInfoType[]
}

// 显示编辑
const handleEdit: any = inject('handleEdit')
const getInfos: any = inject('handleGetFaceInfo')

// 确认删除
async function handlePositiveClick(id: number) {
  loadingBar.start()
  modalLoading.value = true
  const { code, msg } = await DeleteFaceInfo(id)

  if (code === OK_CODE) {
    message.success(msg)
    loadingBar.finish()
    modalLoading.value = false
    getInfos()
    return
  }

  message.error(msg)
  loadingBar.error()
  modalLoading.value = false
}
</script>

<template>
  <div class="relative">
    <div class="sticky top-0 left-0 right-0 z-10">
      <slot name="tableTitle" />
    </div>

    <n-scrollbar class="mt-2">
      <n-table striped :bordered="false" :single-line="false" size="large" class="text-center">
        <thead>
          <tr>
            <th>序号</th>
            <th>头像</th>
            <th>姓名</th>
            <th>学号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) of props.tableData" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>
              <n-image width="100" height="100" lazy :src="item.image">
                <template #placeholder>
                  <div class="image-loading">
                    加载中
                  </div>
                </template>
              </n-image>
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.studentID }}</td>
            <td class="max-w-10">
              <n-button-group>
                <n-button type="info" round @click="handleEdit(item.id)">
                  <template #icon>
                    <n-icon><CogOutline /></n-icon>
                  </template>
                  编辑
                </n-button>

                <n-popconfirm negative-text="取消" positive-text="删除" @positive-click="handlePositiveClick(item.id)">
                  <template #trigger>
                    <n-button type="error" round>
                      <template #icon>
                        <n-icon><WarningOutline /></n-icon>
                      </template>
                      删除
                    </n-button>
                  </template>
                  确定将该条信息删除吗？
                </n-popconfirm>
              </n-button-group>
            </td>
          </tr>
        </tbody>
      </n-table>
    </n-scrollbar>
  </div>
</template>

<style scoped>
.image-loading {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0001;
}
</style>
